<template>
<div>
    <table class="table">
        <tr>
            <td>头像</td>
            <td><input type="file" @change="upfile">
            <img :src="'https://localhost:7094/'+data.img" style="width: 60px; height: 80px;">
            </td>
        </tr>


        <tr>
            <td>姓名</td>
            <td><input type="text" v-model="data.name"></td>
        </tr>

        <tr>
            <td>类型</td>
            <td>
                <select v-model="data.typeid">
                    <option value="0">请选择</option>
                    <option v-for="d in La" :value="d.tid">{{d.tname}}</option>
                </select>
            </td>
        </tr>


        <tr>
            <td>楼栋</td>
            <td><input type="text" v-model="data.louDong"></td>
        </tr>

        <tr>
            <td>房间</td>
            <td><input type="text" v-model="data.fangJian"></td>
        </tr>

        <tr>
            <td>状态</td>
            <td><input type="text" v-model="data.zt"></td>
        </tr>

        <tr>
            <td></td>
            <td><input type="button" value="修改" @click="Update()"></td>
        </tr> 

    </table>
</div>
</template>

<script setup lang="ts">
import {ref,onMounted} from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';
const router=useRouter()
import { useRoute } from 'vue-router';
const route=useRoute()

onMounted(()=>{
    Xia();
    Find()
})

const data=ref({
      "id": 0,
  "name": "string",
  "typeid": 0,
  "img": "string",
  "isDeleted": true,
  "louDong": "string",
  "fangJian": "string",
  "zt": 0
})

const Find=()=>{
    const id=route.query.id

    axios.get("/api/JuMin/Find",{params:{id:id}}).then(res=>{
        data.value=res.data
    })
}

const Update=()=>{

    if(data.value.louDong==""){
        alert("楼栋不能为空值");
        return
    }

    if(data.value.fangJian==""){
        alert("房间不能为空值");
        return
    }

    if(data.value.name==""){
        alert("姓名不能为空值");
        return
    }

    axios.put("/api/JuMin/Update",data.value).then(res=>{
        if(res.data>0){
            alert("修改成功");
            router.push('/')
        }else{
            alert("修改失败");
        }
    })
}

const La=ref([{
    "tid": 0,
    "tname": ""
}])

const Xia=()=>{
    axios.get("/api/JuMin/Xia").then(res=>{
        La.value=res.data
    })
}

const upfile=(e:any)=>{
    var f=e.target.files[0];
    var fd=new FormData();
    fd.append("file",f)

    axios.post("/api/JuMin/Img",fd).then(res=>{
        data.value.img=res.data
    })
}
        
</script>

<style lang="scss" scoped>

</style>